<template>
    <div id="CarSharingUser">
      <el-card class="box-card" style="height:900px;">
        <ul id="ul1">
          <li>
            <el-input v-model="orderNumber" placeholder="请输入查询信息"></el-input>
          </li>
          <li>
            <el-button type="primary">查询</el-button>
          </li>
        </ul>
        <!-- 表格 -->
        <el-table :data="orderData" border style="width: 100%;height:750px;" :header-cell-style="rowStyle" :cell-style="rowStyle">
          <el-table-column fixed prop="id" label="编号"></el-table-column>
          <el-table-column prop="orderNumber" label="订单号" min-width="120" ></el-table-column> 
          <el-table-column prop="diyName" label="商品名称" min-width="200"></el-table-column>
          <el-table-column prop="imageId" label="diy商品图片" width="200">
          <template slot-scope="scope">
                     <el-image style="width: 100px; height: 100px"
                       :src="'http://101.43.223.224:8765/image/getImageById?id='+scope.row.imageId"></el-image>
                   </template>
                   </el-table-column>
          <el-table-column prop="ordersDescribe" label="退货信息" min-width="120"></el-table-column>
          <el-table-column prop="orderTypeId" label="商品类型">
            <template slot-scope="scope">
              <p>
                {{ scope.row.orderTypeId === 1 ? "商品订单" :scope.row.orderTypeId === 2 ? "diy订单" : "888" }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="ordersCause" label="退货原因" min-width="100" ></el-table-column>
          <el-table-column prop="nickName" label="用户名称" min-width="150" ></el-table-column>
          <el-table-column prop="address" label="邮寄地址" min-width="120" ></el-table-column>
          <el-table-column prop="status" label="订单状态" min-width="120" ></el-table-column>

          <!-- <el-table-column prop="workTime" label=""></el-table-column> -->
          <!-- <el-table-column prop="salary" label="薪资"></el-table-column> -->
          <!--
            格式化时间 年 月 日 时 分 秒
            <el-table-column prop="createTime" label="创建时间" :formatter="timeFormat"></el-table-column>
          -->
          <el-table-column prop="createTime" label="创建时间" min-width="120" ></el-table-column>
          <el-table-column fixed="right" label="操作" width="250">
            <template slot-scope="scope">
              <el-button @click="lovesicknessById(scope.row.id)" type="primary" size="primary"  >同意</el-button>
              <el-button @click="takehomemiss(scope.row)" type="primary" size="primary"  >驳回</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[1, 5, 10, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :background="true"
            style="margin: 30px 0 10px">
          </el-pagination>
          <el-dialog :title="takehome" :visible.sync="takehome" width="45%" center>
          <el-form :model="diylistForm" ref="userFormRef" label-width="100px" class="demo-ruleForm">
            <el-form-item label="id" prop="id" v-show="false">
              <el-input v-model="diylistForm.id"></el-input>
            </el-form-item>
            <el-form-item label="驳回信息" prop="chicanery">
              <el-input v-model="diylistForm.chicanery" placeholder="请输入驳回信息"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="controlAddAndUpdateUserWindow = false">取 消</el-button>
            <el-button @click="resetForm('userFormRef')">重 置</el-button>
            <el-button type="primary" @click="refuseById('userFormRef')">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'love',
    data () {
      return {
        windowTypeInfo: '查看订单', // 窗口类型信息
        takehome: false, // 控制添加或修改窗口是否打开
        orderNumber: '', //模糊查订单号
        userId:'', //模糊查用户
        orderData: [], 
        commData:[],
        chicanery:'',
        id:'',
        commdiyDate:[],
        diylistForm:{
          chicanery:'',
          id:'',
        },
        commdiyDatee:[],
        diyorderDate:[],
        userInfo: {}, 
        pageSize: 10, // 每页显示的个数
        pageNum: 1, // 起始的页数 表格中当前页面
        total: 0
      }
    },
    mounted () {
      this.orderlist()
     
    },
    methods: {
      handleSizeChange (val) {
        this.pageSize = val
        this.orderlist()
        console.log(`每页 ${val} 条`)
        this.orderlist()
      },
      handleCurrentChange (val) {
        this.pageNum = val
        this.orderlist()
        console.log(`当前页: ${val}`)
      },
      listdiy(){
      },
      lovesicknessById (id) {
        // 驳回信息
        this.$confirm('是否同意换货或退款呢？？？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$axios
              .delete('ordersRetreat/goodbyeDiy', {
                params: {
                  id: id
                }
              })
              .then((res) => {
                if (res.status === 200) {
                  this.orderlist()
                  this.myMessage('success', '操作成功')
                }
              })
          })
          .catch((error) => {
            console.log(error)
            this.myMessage('info', '已取消')
          })
      },
      takehomemiss(row){
       this.takehome = true
       this.diylistForm.id=row.id 
      },
      refuseById (id) { // 修改
        this.$refs[id].validate((valid) => {
          if (valid) {
       const formData = new FormData()
       for (const albumInfoKey in this.diylistForm) {
      if(this.diylistForm[albumInfoKey]){
        formData.set(albumInfoKey, this.diylistForm[albumInfoKey])
      }
    }
      this.$axios.post('ordersRetreat/amendUpdate',formData).then((result) => {
       if (result.data.flag) {
        this.takehome = false 
        this.orderlist()
        this.chicanery=null
        this.resetForm(formName)
        this.chicanery = null
        this.diylistForm = {
                id: '',
                chicanery: '',
              }
     
        }
      }).catch((err) => {
      console.log(err)
      this.myMessage('success', '恭喜你，驳回成功！')
       })
      }
        })
    
      },

      orderlist () {
        // 查询员工信息
        this.$axios
          .get('ordersRetreat/ordersRetreatDiy', {
            params: {
              userId: this.userId,
              pageNum: this.pageNum,
              pageSize: this.pageSize
            }
          })
          .then((res) => {
          if (res.status === 200) {
          this.orderData = res.data.data.content
          this.total = res.data.data.totalSize
            }
          })
          // .catch((error) => {
          //   this.myMessage('error', '错误哦！系统错误，请联系管理员！')
          //   console.log(error)
          // })
      },
      diyorderlist () {
        // 查询员工信息
        this.$axios
          .get('diyorderl/diyorderllist', {
          })
          .then((res) => {
            if (res.status === 200) {
          this.diyorderDate = res.data.data
            }
          })
          // .catch((error) => {
          //   this.myMessage('error', '错误哦！系统错误，请联系管理员！')
          //   console.log(error)
          // })
      },
      commorderlist () {
        // 查询员工信息
        this.$axios
          .get('commorder/commorderlist', {
          })
          .then((res) => {
            if (res.status === 200) {
          this.commData = res.data.data
            }
          })
          // .catch((error) => {
          //   this.myMessage('error', '错误哦！系统错误，请联系管理员！')
          //   console.log(error)
          // })
      },
      selectchange(a){
      },
      openAddAndUpdateUserWindow (a) {
        this.aa = a.orderTypeId
        this.orderwodes = true
        if(a.orderTypeId==1){
          this.$axios.get('commorder/commorderlist?id='+a.id).then(result =>{
        if (result.data.flag) {
          this.commdiyDatee = result.data.data
        } 
      })
        }else if(a.orderTypeId==2){
          this.$axios.get('diyorderl/diyorderllist?id='+a.id).then(result =>{
        if (result.data.flag) {
          this.commdiyDate = result.data.data
        }
      })
        }
      },
      // 提示信息
      myMessage (type, message) {
        this.$message({
          showClose: true,
          message: message,
          type: type
        })
      },
      // 表格文字居中
      rowStyle () {
        return 'text-align:center'
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
    #ul1{
      height: 40px;
      margin-bottom: 15px;
      list-style: none; 
      
      
  
    }
    #ul1 li{
      float: left;
      margin-right: 10px;
    }
    .uo1{
      width: 100%;
      height: 100%;
      background: beige;
    }
    .yu{
      font-size: 20px;
      text-align: center;
    }
    .uo2{
      width: 100%;
      height: 100%;
      background: rgb(168, 106, 56);
    }
  </style>
  